<!DOCTYPE html>
<html lang="en">
<head>

    <title>健身俱乐部系统</title>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="portal/css/bootstrap.min.css">
    <link rel="stylesheet" href="portal/css/font-awesome.min.css">
    <link rel="stylesheet" href="portal/css/aos.css">

    <!-- 主要 CSS -->
    <link rel="stylesheet" href="portal/css/tooplate-gymso-style.css">

</head>
<body data-spy="scroll" data-target="#navbarNav" data-offset="50">

<!-- 菜单栏-->
<nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">

        <a class="navbar-brand" href="index.html">Hi 运动</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-lg-auto">
                <li class="nav-item">
                    <a href="#home" class="nav-link smoothScroll">Home</a>
                </li>

                <li class="nav-item">
                    <a href="#about" class="nav-link smoothScroll">关于我们</a>
                </li>

                <li class="nav-item">
                    <a href="#class" class="nav-link smoothScroll">课程</a>
                </li>

                <li class="nav-item">
                    <a href="#schedule" class="nav-link smoothScroll">饮食</a>
                </li>

                <li class="nav-item">
                    <a href="#contact" class="nav-link smoothScroll">反馈</a>
                </li>


            </ul>

            <ul class="social-icon ml-lg-3">
                <li class="nav-item">
                    <a href="登录链接" class="nav-link smoothScroll">登录</a>
                </li>

                <li class="nav-item">
                    <a href="注册链接" class="nav-link smoothScroll">注册</a>
                </li>
            </ul>
        </div>

    </div>
</nav>


<!-- Home -->
<section class="hero d-flex flex-column justify-content-center align-items-center" id="home">

    <div class="bg-overlay"></div>

    <div class="container">
        <div class="row">

            <div class="col-lg-8 col-md-10 mx-auto col-12">
                <div class="hero-text mt-5 text-center">

                    <h6 data-aos="fade-up" data-aos-delay="300">建立健康生活方式的新方法！</h6>

                    <h1 class="text-white" data-aos="fade-up" data-aos-delay="500">在健身房健身中心升级您的身体</h1>

                    <a href="#feature" class="btn custom-btn mt-3" data-aos="fade-up" data-aos-delay="600">立即开始</a>

                    <a href="#about" class="btn custom-btn bordered mt-3" data-aos="fade-up" data-aos-delay="700">了解更多</a>

                </div>
            </div>

        </div>
    </div>
</section>


<section class="feature" id="feature">
    <div class="container">
        <div class="row">

            <div class="d-flex flex-column justify-content-center ml-lg-auto mr-lg-5 col-lg-5 col-md-6 col-12">
                <h2 class="mb-3 text-white" data-aos="fade-up">健身新手?</h2>

                <h6 class="mb-4 text-white" data-aos="fade-up">Hi运动您的健身管理专家</h6>
                <h7 class="mb-4 text-white" data-aos="fade-up">简单方法打造美</h7>

                <a rel="nofollow" href="https://www.tooplate.com" target="_parent">最全面的健身计划库：超过100+计划</a>
                <a rel="nofollow" href="https://www.tooplate.com" target="_parent">最专业的饮食库数据：超过500+食物信息</a>

                <a href="#登录链接" class="btn custom-btn bg-color mt-3" data-aos="fade-up" data-aos-delay="300" data-toggle="modal" data-target="#membershipForm">立即成为会员</a>
            </div>

            <div class="mr-lg-auto mt-3 col-lg-4 col-md-6 col-12">
                <div class="about-working-hours">
                    <div>

                        <h2 class="mb-4 text-white" data-aos="fade-up" data-aos-delay="500">开放时间</h2>

                        <strong class="d-block" data-aos="fade-up" data-aos-delay="600">星期日</strong>
                        <p data-aos="fade-up" data-aos-delay="800">不开放</p>

                        <strong class="mt-3 d-block" data-aos="fade-up" data-aos-delay="700">周一 至 周五</strong>

                        <p data-aos="fade-up" data-aos-delay="800">7:00 AM - 10:00 PM</p>

                        <strong class="mt-3 d-block" data-aos="fade-up" data-aos-delay="700">周六</strong>

                        <p data-aos="fade-up" data-aos-delay="800">6:00 AM - 4:00 PM</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>
</section>


<!-- ABOUT -->
<section class="about section" id="about">
    <div class="container">
        <div class="row">

            <div class="mt-lg-5 mb-lg-0 mb-4 col-lg-5 col-md-10 mx-auto col-12">
                <h2 class="mb-4" data-aos="fade-up" data-aos-delay="300">Hello, 这里是Hi运动</h2>

                <p data-aos="fade-up" data-aos-delay="400">如果你需要一个好身材，就快加入我们吧</p>

                <p data-aos="fade-up" data-aos-delay="500">如果您对 <a rel="nofollow" href="https://www.tooplate.com/view/2119-gymso-fitness" target="_parent">Hi运动 </a>有任何问题, 您可以 <a rel="nofollow" href="https://www.tooplate.com/contact" target="_parent">直接联系我们</a> 非常感谢！</p>

            </div>

            <div class="ml-lg-auto col-lg-3 col-md-6 col-12" data-aos="fade-up" data-aos-delay="700">
                <div class="team-thumb">
                    <img src="/portal/images/team/team-image.jpg" class="img-fluid" alt="Trainer">

                    <div class="team-info d-flex flex-column">

                        <h3>Mary Yan</h3>
                        <span>Yoga Instructor</span>

                        <ul class="social-icon mt-3">
                            <li><a href="#" class="fa fa-twitter"></a></li>
                            <li><a href="#" class="fa fa-instagram"></a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="mr-lg-auto mt-5 mt-lg-0 mt-md-0 col-lg-3 col-md-6 col-12" data-aos="fade-up" data-aos-delay="800">
                <div class="team-thumb">
                    <img src="/portal/images/team/team-image01.jpg" class="img-fluid" alt="Trainer">

                    <div class="team-info d-flex flex-column">

                        <h3>Catherina</h3>
                        <span>Body trainer</span>

                        <ul class="social-icon mt-3">
                            <li><a href="#" class="fa fa-instagram"></a></li>
                            <li><a href="#" class="fa fa-facebook"></a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- CLASS -->
<section class="class section" id="class">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-12 text-center mb-5">
                <h6 data-aos="fade-up">Get A Perfect Body</h6>

                <h2 data-aos="fade-up" data-aos-delay="200">我们的训练课程</h2>
            </div>

            <div class="col-lg-4 col-md-6 col-12" data-aos="fade-up" data-aos-delay="400">
                <div class="class-thumb">
                    <img src="/portal/images/class/yoga-class.jpg" class="img-fluid" alt="Class">

                    <div class="class-info">
                        <h3 class="mb-1">瑜伽</h3>

                        <span><strong>教练</strong> - Bella</span>

                        <span class="class-price">￥100</span>

                        <p class="mt-3">超放松超舒爽的全身拉伸～打开肩胸，提 高全身柔韧性，缓解全身僵硬的肌肉，还 能美化身体线条，适合运动后，早晨或睡前练习
                        </p>
                    </div>
                </div>
            </div>

            <div class="mt-5 mt-lg-0 mt-md-0 col-lg-4 col-md-6 col-12" data-aos="fade-up" data-aos-delay="500">
                <div class="class-thumb">
                    <img src="/portal/images/class/crossfit-class.jpg" class="img-fluid" alt="Class">

                    <div class="class-info">
                        <h3 class="mb-1">瑜伽</h3>

                        <span><strong>教练</strong> - Mary</span>

                        <span class="class-price">￥100</span>

                        <p class="mt-3">超放松超舒爽的全身拉伸～打开肩胸，提 高全身柔韧性，缓解全身僵硬的肌肉，还 能美化身体线条，适合运动后，早晨或睡前练习</p>
                    </div>
                </div>
            </div>

            <div class="mt-5 mt-lg-0 col-lg-4 col-md-6 col-12" data-aos="fade-up" data-aos-delay="600">
                <div class="class-thumb">
                    <img src="/portal/images/class/cardio-class.jpg" class="img-fluid" alt="Class">

                    <div class="class-info">
                        <h3 class="mb-1">瑜伽</h3>

                        <span><strong>教练</strong> - Cathe</span>

                        <span class="class-price">$75</span>

                        <p class="mt-3">超放松超舒爽的全身拉伸～打开肩胸，提 高全身柔韧性，缓解全身僵硬的肌肉，还 能美化身体线条，适合运动后，早晨或睡前练习</p>
                    </div>
                </div>
            </div>

            <!--更多课程-->
            <a href="/toPortalCourse" class="btn custom-btn bg-color mt-3" >查看更多教程</a>
        </div>
    </div>
</section>


<!-- 饮食 -->
<section class="schedule section" id="schedule">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-12 text-center">
                <h6 data-aos="fade-up">饮食专区</h6>

                <h2 class="text-white" data-aos="fade-up" data-aos-delay="200">食物信息</h2>
            </div>

            <div class="col-lg-12 py-5 col-md-12 col-12">

            </div>

        </div>
    </div>
</section>


<!-- 反馈 -->
<section class="contact section" id="contact">
    <div class="container">
        <div class="row">

            <div class="ml-auto col-lg-5 col-md-6 col-12">
                <h2 class="mb-4 pb-2" data-aos="fade-up" data-aos-delay="200">反馈</h2>

                <form action="#" method="post" class="contact-form webform" data-aos="fade-up" data-aos-delay="400" role="form">
                    <input type="text" class="form-control" name="cf-name" placeholder="名称">

                    <input type="email" class="form-control" name="cf-email" placeholder="邮箱">

                    <textarea class="form-control" rows="5" name="cf-message" placeholder="信息"></textarea>

                    <button type="submit" class="form-control" id="submit-button" name="submit">提交反馈</button>
                </form>
            </div>

            <div class="mx-auto mt-4 mt-lg-0 mt-md-0 col-lg-5 col-md-6 col-12">
                <h2 class="mb-4" data-aos="fade-up" data-aos-delay="600">你可以在这里<span>找到我们</span></h2>

                <p data-aos="fade-up" data-aos-delay="800"><i class="fa fa-map-marker mr-1"></i> 福州市闽侯县乌龙江大道2号</p>

                <div class="google-map" data-aos="fade-up" data-aos-delay="900">
                    <iframe src="https://j.map.baidu.com/86/h2i" width="2240" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- FOOTER -->
<footer class="site-footer">
    <div class="container">
        <div class="row">

            <div class="ml-auto col-lg-4 col-md-5">
                <p class="copyright-text">Copyright &copy; 2022 Hi运动 Co.
            </div>

            <div class="d-flex justify-content-center mx-auto col-lg-5 col-md-7 col-12">
                <p class="mr-4">
                    <i class="fa fa-envelope-o mr-1"></i>
                    <a href="#">1484430679@qq.com</a>
                </p>

                <p><i class="fa fa-phone mr-1"></i>+86-17459041153</p>
            </div>

        </div>
    </div>
</footer>

<!-- Modal -->
<div class="modal fade" id="membershipForm" tabindex="-1" role="dialog" aria-labelledby="membershipFormLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">

        <div class="modal-content">
            <div class="modal-header">

                <h2 class="modal-title" id="membershipFormLabel">Membership Form</h2>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form class="membership-form webform" role="form">
                    <input type="text" class="form-control" name="cf-name" placeholder="John Doe">

                    <input type="email" class="form-control" name="cf-email" placeholder="Johndoe@gmail.com">

                    <input type="tel" class="form-control" name="cf-phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

                    <textarea class="form-control" rows="3" name="cf-message" placeholder="Additional Message"></textarea>

                    <button type="submit" class="form-control" id="submit-button2" name="submit">Submit Button</button>

                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="signup-agree">
                        <label class="custom-control-label text-small text-muted" for="signup-agree">I agree to the <a href="#">Terms &amp;Conditions</a>
                        </label>
                    </div>
                </form>
            </div>

            <div class="modal-footer"></div>

        </div>
    </div>
</div>

<!-- SCRIPTS -->
<script src="portal/js/jquery.min.js"></script>
<script src="portal/js/bootstrap.min.js"></script>
<script src="portal/js/aos.js"></script>
<script src="portal/js/smoothscroll.js"></script>
<script src="portal/js/custom.js"></script>

</body>
</html>